<template>
    <div style="background: #111214;color:#fff; width: 100%;min-height: 100vh;">
      <div v-show="showIssue">
        <native :title="title"></native>
        <div class="faq-home">
            <div v-for="(val,index) in issueList" class="faq-line" @click="lineCli(index)">
              <span>{{val.name}}</span>
              <img src="../assets/img/list-icon-more.svg" alt="">
            </div>
        </div>
      </div>
      <div v-if="!showIssue">
        <img @click="returnIssue" style="position: absolute;top:0px;left:0px;" src="../assets/img/return-left.svg" alt="">
        <div style="padding: 15px;font-size: 12px;color: rgba(255, 255, 255, .6);padding-top: 60px;">
          <div style="font-size: 20px;color: #fff;margin-bottom: 40px;">{{issueList[active].name.split('.')[1]}}</div>
          <div v-for="val in issueList[active].text" style="margin-bottom: 15px;line-height: 1.5;">
            {{val}}
          </div>
        </div>
      </div>
      <div class="faq-btn" @click="jumpTake">
        <img src="../assets/img/personal-icon-feedback.svg" alt="">
        <span>用户反馈</span>
      </div>
    </div>

  </template>

  <script>
  import native from './public/native.vue'
  export default {
    name: 'faq',
    data () {
      return {
        title:'常见问题',
        issueList:[
          {index:0,name:'1.如何算力包',text:['进入“首页”界面->点击【购买创始算力】或者【立即挖矿】->算力包详情~>点击【立即购买】->选择购买数量>输入交易密码->依照步骤完成支付->“个人中心-算力记录”界面，可查看购买信息。']},
          {index:1,name:'2.忘记交易密码',text:['进入“个人中心-安全中心”界面->点击修改交易密码~>进行手机验证->输入新的交易密码和验证码->点击修改密码']},
          {index:2,name:'3.收益到帐时间',text:['购买算力包获得收益的到账时间为用户在首页收取GTZ块时间，立即到账。','用户可在“个人中心-资产管理”界面中查询挖矿记录。']},
          {index:3,name:'4.为何不能充币或提币',text:['请检查钱包地址是否错误，或确认网络是否连接。']},
          {index:4,name:'5.如何充币',text:['进入“个人中心-资产管理”界面->选择充币币种->点击【充值】按钮->进入“充值”界面->用户可进行扫码识别地址，或复制该地址进行充值币种。','注意:平台只支持ERC20 USDT,充值前请仔细核对充币地址，若因充值地址错误导致无法充值到平台，平台概不负责。']},
          {index:5,name:'6.如何提币',text:['进入“个人中心-资产管理”界面->选择提币币种->->点击【提现】按钮->复制粘贴币钱包地址->输入提币数量->提交申请>输入交易密码即可。','提币成功后，提币记录可在“个人中心-资产管理”界面查看转账明细。','注意:请仔细核对所提供的提币地址，若地址错误将导致提币无效且资产无法找回，平台概不负责。']},
          {index:6,name:'7.如何完成身份认证',text:['进入“个人中心-安全中心”界面->身份认证->输入本人正确身份证姓名、身份证号码->提交。']},
          {index:7,name:'8.联系我们',text:['如有任何疑问，请添加官方微信号沟通: ideonet']},
        ],
        showIssue:true,
        active:''
      }
    },  
    components:{
      native
    },
    computed: {
      
    },
    mounted() {
      window.noBack = this.returnIssue.bind(this);
    },
    methods: {
      lineCli(index){
        this.active = index;
        this.showIssue = false;
      },
      returnIssue(){
        window.noBack = false;
        this.showIssue=true;
      },
      jumpTake(){
        this.$router.push('/userFeedback');
      }
    },
  }
  </script>

  <!-- Add "scoped" attribute to limit CSS to this component only -->
  <style lang="less" scoped>
    .faq-home{
      width: 100%;
      padding: 0px 15px 20px 15px;
    }
    .faq-line{
      padding: 22px 0px;
      position: relative;
      font-size: 16px;
      color: rgba(255, 255, 255, .5);
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      img{
        position: absolute;
        right: 0px;
        top:18px;
      }
    }
    .faq-btn{
      position: fixed;
      bottom: 0px;
      width: calc(100% - 30px);
      height: 56px;
      line-height: 56px;
      margin-left: 15px;
      margin-bottom: 10px;
      background-color: #6E59FF;
      border-radius: 6px;
      text-align: center;
      font-size: 16px;
      img{
        vertical-align: middle;
        position: relative;
        top: -2px;
      }
    }
  </style>
